<template>
  <div class="box">{{ 1 + 1 }} : {{ a }} + {{ b }} = {{ c }}</div>
  <div>
    <button @click="add">操作</button>
  </div>
  <div v-if="isLoad">
    <input type="number" v-model="protect.options.diffA.value" />
    <table>
      <tbody>
        <tr>
          <td>栏目1</td>
          <td>栏目2</td>
          <td>栏目3</td>
          <td>栏目4</td>
          <td>栏目5</td>
        </tr>
        <tr v-for="(item, index) in protect.results" :key="index">
          <td>{{ item.a_num }}</td>
          <td>{{ item.b_num }}</td>
          <td>{{ item.result.origin }}</td>
          <td>{{ item.result.diff }}</td>
          <td>{{ item.result.grow }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { computed, ref, markRaw } from 'vue'
import Protect from './class/Protect.class.js'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: null,
      protect: null,
      isLoad: false
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
    }
  },
  mounted() {
    console.log(`helloworld`)
    this.c = computed(() => {
      return this.a + this.b + 999
    })

    this.protect = markRaw(new Protect())
    this.isLoad = true
  }
}
</script>
<style type="text/css">
.box {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
</style>
